<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>库存统计 - 粮食收购大数据平台</title>
    <!-- Element Plus CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <!-- Vue 3 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- Element Plus JS -->
    <script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
    <!-- Element Plus Icons -->
    <script src="https://unpkg.com/@element-plus/icons-vue/dist/index.iife.js"></script>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body {
            margin: 0;
            padding: 20px;
            background-color: #f5f7fa;
            font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
        }
        .page-container {
            max-width: 1400px;
            margin: 0 auto;
        }
        .page-header {
            background: white;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .page-title {
            font-size: 24px;
            font-weight: 600;
            color: #333;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .page-title i {
            color: #9C27B0;
        }
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }
        .stat-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            text-align: center;
        }
        .stat-icon {
            font-size: 32px;
            margin-bottom: 10px;
        }
        .stat-icon.total { color: #409EFF; }
        .stat-icon.rice { color: #67C23A; }
        .stat-icon.wheat { color: #E6A23C; }
        .stat-icon.corn { color: #F56C6C; }
        .stat-icon.value { color: #9C27B0; }
        .stat-value {
            font-size: 28px;
            font-weight: 600;
            color: #333;
            margin-bottom: 5px;
        }
        .stat-label {
            font-size: 14px;
            color: #666;
        }
        .content-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 20px;
        }
        .content-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .card-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .search-bar {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
            flex-wrap: wrap;
            align-items: center;
        }
        .search-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .search-item label {
            font-size: 14px;
            color: #666;
            white-space: nowrap;
        }
        .chart-container {
            height: 300px;
            position: relative;
        }
        .table-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        .table-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
        }
        .grain-type {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
            color: white;
        }
        .grain-type.rice { background-color: #67C23A; }
        .grain-type.wheat { background-color: #E6A23C; }
        .grain-type.corn { background-color: #F56C6C; }
        .grain-type.soybean { background-color: #909399; }
        .grain-type.other { background-color: #409EFF; }
        .warning-level {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
            color: white;
        }
        .warning-level.safe { background-color: #67C23A; }
        .warning-level.warning { background-color: #E6A23C; }
        .warning-level.danger { background-color: #F56C6C; }
        @media (max-width: 768px) {
            .content-grid {
                grid-template-columns: 1fr;
            }
            .search-bar {
                flex-direction: column;
                align-items: stretch;
            }
            .search-item {
                flex-direction: column;
                align-items: stretch;
            }
            .table-header {
                flex-direction: column;
                gap: 10px;
                align-items: stretch;
            }
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="page-container">
            <!-- 页面头部 -->
            <div class="page-header">
                <h1 class="page-title">
                    <i class="fas fa-chart-bar"></i>
                    库存统计
                </h1>
            </div>

            <!-- 统计卡片 -->
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-icon total">
                        <i class="fas fa-warehouse"></i>
                    </div>
                    <div class="stat-value">{{ totalInventory }}万吨</div>
                    <div class="stat-label">总库存量</div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon rice">
                        <i class="fas fa-seedling"></i>
                    </div>
                    <div class="stat-value">{{ riceInventory }}万吨</div>
                    <div class="stat-label">稻米库存</div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon wheat">
                        <i class="fas fa-wheat-awn"></i>
                    </div>
                    <div class="stat-value">{{ wheatInventory }}万吨</div>
                    <div class="stat-label">小麦库存</div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon corn">
                        <i class="fas fa-corn"></i>
                    </div>
                    <div class="stat-value">{{ cornInventory }}万吨</div>
                    <div class="stat-label">玉米库存</div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon value">
                        <i class="fas fa-dollar-sign"></i>
                    </div>
                    <div class="stat-value">{{ totalValue }}亿元</div>
                    <div class="stat-label">库存总价值</div>
                </div>
            </div>

            <!-- 图表区域 -->
            <div class="content-grid">
                <!-- 库存分布饼图 -->
                <div class="content-card">
                    <div class="card-title">
                        <i class="fas fa-chart-pie"></i>
                        库存分布
                    </div>
                    <div class="chart-container">
                        <canvas id="inventoryPieChart"></canvas>
                    </div>
                </div>

                <!-- 库存趋势图 -->
                <div class="content-card">
                    <div class="card-title">
                        <i class="fas fa-chart-line"></i>
                        库存趋势
                    </div>
                    <div class="chart-container">
                        <canvas id="inventoryTrendChart"></canvas>
                    </div>
                </div>
            </div>

            <!-- 地区库存对比 -->
            <div class="content-card" style="margin-bottom: 20px;">
                <div class="card-title">
                    <i class="fas fa-chart-bar"></i>
                    地区库存对比
                </div>
                <div class="chart-container" style="height: 400px;">
                    <canvas id="regionInventoryChart"></canvas>
                </div>
            </div>

            <!-- 库存详情表格 -->
            <div class="content-card">
                <!-- 搜索栏 -->
                <div class="search-bar">
                    <div class="search-item">
                        <label>关键词：</label>
                        <el-input
                            v-model="searchForm.keyword"
                            placeholder="请输入仓库名称或代码"
                            style="width: 200px;"
                            clearable>
                        </el-input>
                    </div>
                    <div class="search-item">
                        <label>地区：</label>
                        <el-select v-model="searchForm.region" placeholder="请选择地区" style="width: 150px;" clearable>
                            <el-option v-for="region in regionList" :key="region" :label="region" :value="region"></el-option>
                        </el-select>
                    </div>
                    <div class="search-item">
                        <label>粮食类型：</label>
                        <el-select v-model="searchForm.grainType" placeholder="请选择类型" style="width: 120px;" clearable>
                            <el-option label="稻米" value="rice"></el-option>
                            <el-option label="小麦" value="wheat"></el-option>
                            <el-option label="玉米" value="corn"></el-option>
                            <el-option label="大豆" value="soybean"></el-option>
                            <el-option label="其他" value="other"></el-option>
                        </el-select>
                    </div>
                    <div class="search-item">
                        <label>预警级别：</label>
                        <el-select v-model="searchForm.warningLevel" placeholder="请选择级别" style="width: 100px;" clearable>
                            <el-option label="安全" value="safe"></el-option>
                            <el-option label="预警" value="warning"></el-option>
                            <el-option label="危险" value="danger"></el-option>
                        </el-select>
                    </div>
                    <el-button type="primary" @click="searchInventory">
                        <i class="fas fa-search"></i> 搜索
                    </el-button>
                    <el-button @click="resetSearch">
                        <i class="fas fa-redo"></i> 重置
                    </el-button>
                </div>

                <!-- 表格头部 -->
                <div class="table-header">
                    <div class="table-title">库存详情</div>
                    <div>
                        <el-button type="success" @click="exportData">
                            <i class="fas fa-download"></i> 导出报表
                        </el-button>
                        <el-button type="warning" @click="generateReport">
                            <i class="fas fa-file-alt"></i> 生成报告
                        </el-button>
                    </div>
                </div>

                <!-- 数据表格 -->
                <el-table :data="filteredInventory" style="width: 100%" v-loading="loading">
                    <el-table-column prop="warehouseCode" label="仓库代码" width="120" sortable></el-table-column>
                    <el-table-column prop="warehouseName" label="仓库名称" width="180">
                        <template #default="scope">
                            <strong>{{ scope.row.warehouseName }}</strong>
                        </template>
                    </el-table-column>
                    <el-table-column prop="region" label="所属地区" width="120"></el-table-column>
                    <el-table-column prop="grainType" label="粮食类型" width="100">
                        <template #default="scope">
                            <span :class="`grain-type ${scope.row.grainType}`">
                                {{ getGrainTypeText(scope.row.grainType) }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="currentStock" label="当前库存(吨)" width="120" sortable>
                        <template #default="scope">
                            <span>{{ scope.row.currentStock?.toLocaleString() }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="maxCapacity" label="最大容量(吨)" width="120" sortable>
                        <template #default="scope">
                            <span>{{ scope.row.maxCapacity?.toLocaleString() }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="utilizationRate" label="利用率" width="100" sortable>
                        <template #default="scope">
                            <el-progress :percentage="scope.row.utilizationRate" :color="getProgressColor(scope.row.utilizationRate)"></el-progress>
                        </template>
                    </el-table-column>
                    <el-table-column prop="unitPrice" label="单价(元/吨)" width="120" sortable>
                        <template #default="scope">
                            <span>{{ scope.row.unitPrice?.toLocaleString() }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="totalValue" label="总价值(万元)" width="120" sortable>
                        <template #default="scope">
                            <span>{{ scope.row.totalValue?.toLocaleString() }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="warningLevel" label="预警级别" width="100">
                        <template #default="scope">
                            <span :class="`warning-level ${scope.row.warningLevel}`">
                                {{ getWarningLevelText(scope.row.warningLevel) }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="lastUpdateTime" label="更新时间" width="180" sortable></el-table-column>
                    <el-table-column label="操作" width="150" fixed="right">
                        <template #default="scope">
                            <el-button size="small" @click="viewDetails(scope.row)">
                                <i class="fas fa-eye"></i> 查看
                            </el-button>
                            <el-button size="small" type="primary" @click="updateStock(scope.row)">
                                <i class="fas fa-edit"></i> 更新
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 分页 -->
                <div style="margin-top: 20px; text-align: center;">
                    <el-pagination
                        v-model:current-page="currentPage"
                        v-model:page-size="pageSize"
                        :page-sizes="[10, 20, 50, 100]"
                        :total="totalCount"
                        layout="total, sizes, prev, pager, next, jumper">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>

    <script>
        const { createApp, ref, computed, onMounted, nextTick } = Vue;
        const { ElMessage, ElMessageBox } = ElementPlus;

        createApp({
            setup() {
                // 响应式数据
                const loading = ref(false);
                const currentPage = ref(1);
                const pageSize = ref(20);
                const totalCount = ref(0);
                
                // 搜索表单
                const searchForm = ref({
                    keyword: '',
                    region: '',
                    grainType: '',
                    warningLevel: ''
                });
                
                // 地区列表
                const regionList = ref(['北京市', '上海市', '河北省', '山东省', '江苏省', '浙江省', '广东省', '四川省', '湖南省', '黑龙江省']);
                
                // 模拟库存数据
                const inventoryList = ref([
                    {
                        id: 1,
                        warehouseCode: 'WH001',
                        warehouseName: '北京中央储备库',
                        region: '北京市',
                        grainType: 'rice',
                        currentStock: 25000,
                        maxCapacity: 30000,
                        utilizationRate: 83,
                        unitPrice: 4200,
                        totalValue: 10500,
                        warningLevel: 'safe',
                        lastUpdateTime: '2024-01-20 14:30:00'
                    },
                    {
                        id: 2,
                        warehouseCode: 'WH002',
                        warehouseName: '上海港口粮库',
                        region: '上海市',
                        grainType: 'wheat',
                        currentStock: 18000,
                        maxCapacity: 25000,
                        utilizationRate: 72,
                        unitPrice: 3800,
                        totalValue: 6840,
                        warningLevel: 'safe',
                        lastUpdateTime: '2024-01-20 13:45:00'
                    },
                    {
                        id: 3,
                        warehouseCode: 'WH003',
                        warehouseName: '河北石家庄粮库',
                        region: '河北省',
                        grainType: 'corn',
                        currentStock: 32000,
                        maxCapacity: 40000,
                        utilizationRate: 80,
                        unitPrice: 2800,
                        totalValue: 8960,
                        warningLevel: 'safe',
                        lastUpdateTime: '2024-01-20 12:20:00'
                    },
                    {
                        id: 4,
                        warehouseCode: 'WH004',
                        warehouseName: '山东济南储备库',
                        region: '山东省',
                        grainType: 'wheat',
                        currentStock: 8000,
                        maxCapacity: 20000,
                        utilizationRate: 40,
                        unitPrice: 3900,
                        totalValue: 3120,
                        warningLevel: 'warning',
                        lastUpdateTime: '2024-01-20 11:15:00'
                    },
                    {
                        id: 5,
                        warehouseCode: 'WH005',
                        warehouseName: '江苏南京粮库',
                        region: '江苏省',
                        grainType: 'rice',
                        currentStock: 15000,
                        maxCapacity: 18000,
                        utilizationRate: 83,
                        unitPrice: 4300,
                        totalValue: 6450,
                        warningLevel: 'safe',
                        lastUpdateTime: '2024-01-20 10:30:00'
                    },
                    {
                        id: 6,
                        warehouseCode: 'WH006',
                        warehouseName: '浙江杭州储备库',
                        region: '浙江省',
                        grainType: 'rice',
                        currentStock: 12000,
                        maxCapacity: 15000,
                        utilizationRate: 80,
                        unitPrice: 4400,
                        totalValue: 5280,
                        warningLevel: 'safe',
                        lastUpdateTime: '2024-01-20 09:45:00'
                    },
                    {
                        id: 7,
                        warehouseCode: 'WH007',
                        warehouseName: '广东广州港口库',
                        region: '广东省',
                        grainType: 'corn',
                        currentStock: 5000,
                        maxCapacity: 22000,
                        utilizationRate: 23,
                        unitPrice: 2900,
                        totalValue: 1450,
                        warningLevel: 'danger',
                        lastUpdateTime: '2024-01-20 08:20:00'
                    },
                    {
                        id: 8,
                        warehouseCode: 'WH008',
                        warehouseName: '四川成都粮库',
                        region: '四川省',
                        grainType: 'rice',
                        currentStock: 20000,
                        maxCapacity: 25000,
                        utilizationRate: 80,
                        unitPrice: 4100,
                        totalValue: 8200,
                        warningLevel: 'safe',
                        lastUpdateTime: '2024-01-20 07:30:00'
                    },
                    {
                        id: 9,
                        warehouseCode: 'WH009',
                        warehouseName: '湖南长沙储备库',
                        region: '湖南省',
                        grainType: 'rice',
                        currentStock: 16000,
                        maxCapacity: 20000,
                        utilizationRate: 80,
                        unitPrice: 4000,
                        totalValue: 6400,
                        warningLevel: 'safe',
                        lastUpdateTime: '2024-01-20 06:45:00'
                    },
                    {
                        id: 10,
                        warehouseCode: 'WH010',
                        warehouseName: '黑龙江哈尔滨粮库',
                        region: '黑龙江省',
                        grainType: 'soybean',
                        currentStock: 28000,
                        maxCapacity: 35000,
                        utilizationRate: 80,
                        unitPrice: 5200,
                        totalValue: 14560,
                        warningLevel: 'safe',
                        lastUpdateTime: '2024-01-20 05:20:00'
                    }
                ]);
                
                // 计算属性
                const totalInventory = computed(() => {
                    return Math.round(inventoryList.value.reduce((sum, item) => sum + item.currentStock, 0) / 10000 * 100) / 100;
                });
                
                const riceInventory = computed(() => {
                    const rice = inventoryList.value.filter(item => item.grainType === 'rice');
                    return Math.round(rice.reduce((sum, item) => sum + item.currentStock, 0) / 10000 * 100) / 100;
                });
                
                const wheatInventory = computed(() => {
                    const wheat = inventoryList.value.filter(item => item.grainType === 'wheat');
                    return Math.round(wheat.reduce((sum, item) => sum + item.currentStock, 0) / 10000 * 100) / 100;
                });
                
                const cornInventory = computed(() => {
                    const corn = inventoryList.value.filter(item => item.grainType === 'corn');
                    return Math.round(corn.reduce((sum, item) => sum + item.currentStock, 0) / 10000 * 100) / 100;
                });
                
                const totalValue = computed(() => {
                    return Math.round(inventoryList.value.reduce((sum, item) => sum + item.totalValue, 0) / 10000 * 100) / 100;
                });
                
                const filteredInventory = computed(() => {
                    let filtered = inventoryList.value;
                    
                    if (searchForm.value.keyword) {
                        const keyword = searchForm.value.keyword.toLowerCase();
                        filtered = filtered.filter(item => 
                            item.warehouseName.toLowerCase().includes(keyword) ||
                            item.warehouseCode.toLowerCase().includes(keyword)
                        );
                    }
                    
                    if (searchForm.value.region) {
                        filtered = filtered.filter(item => item.region === searchForm.value.region);
                    }
                    
                    if (searchForm.value.grainType) {
                        filtered = filtered.filter(item => item.grainType === searchForm.value.grainType);
                    }
                    
                    if (searchForm.value.warningLevel) {
                        filtered = filtered.filter(item => item.warningLevel === searchForm.value.warningLevel);
                    }
                    
                    totalCount.value = filtered.length;
                    return filtered;
                });
                
                // 方法
                const getGrainTypeText = (type) => {
                    const typeMap = {
                        'rice': '稻米',
                        'wheat': '小麦',
                        'corn': '玉米',
                        'soybean': '大豆',
                        'other': '其他'
                    };
                    return typeMap[type] || '未知';
                };
                
                const getWarningLevelText = (level) => {
                    const levelMap = {
                        'safe': '安全',
                        'warning': '预警',
                        'danger': '危险'
                    };
                    return levelMap[level] || '未知';
                };
                
                const getProgressColor = (percentage) => {
                    if (percentage >= 80) return '#67C23A';
                    if (percentage >= 50) return '#E6A23C';
                    return '#F56C6C';
                };
                
                const searchInventory = () => {
                    loading.value = true;
                    setTimeout(() => {
                        loading.value = false;
                        ElMessage.success('搜索完成');
                    }, 500);
                };
                
                const resetSearch = () => {
                    searchForm.value = {
                        keyword: '',
                        region: '',
                        grainType: '',
                        warningLevel: ''
                    };
                    ElMessage.info('搜索条件已重置');
                };
                
                const viewDetails = (item) => {
                    ElMessage.info(`查看库存详情：${item.warehouseName}`);
                };
                
                const updateStock = (item) => {
                    ElMessage.info(`更新库存：${item.warehouseName}`);
                };
                
                const exportData = () => {
                    ElMessage.success('库存报表导出功能开发中...');
                };
                
                const generateReport = () => {
                    ElMessage.success('库存报告生成功能开发中...');
                };
                
                // 初始化图表
                const initCharts = () => {
                    nextTick(() => {
                        // 库存分布饼图
                        const pieCtx = document.getElementById('inventoryPieChart');
                        if (pieCtx) {
                            new Chart(pieCtx, {
                                type: 'pie',
                                data: {
                                    labels: ['稻米', '小麦', '玉米', '大豆'],
                                    datasets: [{
                                        data: [riceInventory.value, wheatInventory.value, cornInventory.value, 14.56],
                                        backgroundColor: ['#67C23A', '#E6A23C', '#F56C6C', '#909399']
                                    }]
                                },
                                options: {
                                    responsive: true,
                                    maintainAspectRatio: false,
                                    plugins: {
                                        legend: {
                                            position: 'bottom'
                                        }
                                    }
                                }
                            });
                        }
                        
                        // 库存趋势图
                        const trendCtx = document.getElementById('inventoryTrendChart');
                        if (trendCtx) {
                            new Chart(trendCtx, {
                                type: 'line',
                                data: {
                                    labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
                                    datasets: [{
                                        label: '总库存',
                                        data: [180, 175, 185, 190, 195, 184],
                                        borderColor: '#409EFF',
                                        backgroundColor: 'rgba(64, 158, 255, 0.1)',
                                        tension: 0.4
                                    }]
                                },
                                options: {
                                    responsive: true,
                                    maintainAspectRatio: false,
                                    scales: {
                                        y: {
                                            beginAtZero: false,
                                            title: {
                                                display: true,
                                                text: '库存量(万吨)'
                                            }
                                        }
                                    }
                                }
                            });
                        }
                        
                        // 地区库存对比图
                        const regionCtx = document.getElementById('regionInventoryChart');
                        if (regionCtx) {
                            new Chart(regionCtx, {
                                type: 'bar',
                                data: {
                                    labels: ['北京市', '上海市', '河北省', '山东省', '江苏省', '浙江省', '广东省', '四川省', '湖南省', '黑龙江省'],
                                    datasets: [{
                                        label: '库存量(万吨)',
                                        data: [2.5, 1.8, 3.2, 0.8, 1.5, 1.2, 0.5, 2.0, 1.6, 2.8],
                                        backgroundColor: '#409EFF'
                                    }]
                                },
                                options: {
                                    responsive: true,
                                    maintainAspectRatio: false,
                                    scales: {
                                        y: {
                                            beginAtZero: true,
                                            title: {
                                                display: true,
                                                text: '库存量(万吨)'
                                            }
                                        }
                                    }
                                }
                            });
                        }
                    });
                };
                
                // 生命周期
                onMounted(() => {
                    initCharts();
                });
                
                return {
                    loading,
                    currentPage,
                    pageSize,
                    totalCount,
                    searchForm,
                    regionList,
                    inventoryList,
                    totalInventory,
                    riceInventory,
                    wheatInventory,
                    cornInventory,
                    totalValue,
                    filteredInventory,
                    getGrainTypeText,
                    getWarningLevelText,
                    getProgressColor,
                    searchInventory,
                    resetSearch,
                    viewDetails,
                    updateStock,
                    exportData,
                    generateReport
                };
            }
        }).use(ElementPlus).mount('#app');
    </script>
</body>
</html>